<!-- 身份认证 -->
<template>
	<view class="container">
		<view class="auth-title">
			<view class="">
				上传您的身份证
			</view>
			<view class="">
				这是表达诚信的第一步哦～
			</view>
		</view>
		<view class="auth-form">
			<uv-form labelPosition="top" :model="form" :rules="rules" ref="form" borderBottom="false" labelWidth="100"
				:labelStyle="labelStyle">
				<uv-form-item label="真实姓名" prop="real_name">
					<uv-input placeholder="请输入姓名" border="surround" v-model="form.real_name" @change="changeRealName"
						type="text"></uv-input>
				</uv-form-item>
				<uv-form-item label="身份证号" prop="idcard">
					<uv-input placeholder="请输入身份证号" border="surround" v-model="form.idcard" @change="changeIdCard"
						type="idcard"></uv-input>
				</uv-form-item>
				<uv-upload :fileList="form.idcard_z" name="1" :maxCount="1" width="654rpx" height="445rpx"
					@afterRead="afterReadZ" @delete="deletePicZ">
					<!-- <image :src="form.idcard_z[0].url" mode="widthFix" style="width: 654rpx;height: 445rpx;"
						v-if="form.idcard_z.length>0">
					</image> -->
					<image src="../../static/auth/sf-z.png" mode="widthFix" style="width: 654rpx;height: 445rpx;">
					</image>
				</uv-upload>
				<view class="" style="margin-top: 18rpx;">
					<uv-upload :fileList="form.idcard_f" name="1" :maxCount="1" width="654rpx" height="445rpx"
						@afterRead="afterReadF" @delete="deletePicF">
						<image src="../../static/auth/sf-f.png" mode="widthFix" style="width: 654rpx;height: 445rpx;">
						</image>
					</uv-upload>
				</view>
				<uv-form-item>
					<button class="btn" @click="Save">下一步</button>
				</uv-form-item>
			</uv-form>
		</view>
	</view>
</template>

<script>
	import {
		ImageDel,
		UserRealInfo,
		UserRealSave
	} from '../../api/auth.js'
	import {
		idCard,
		chinese,
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	export default {
		data() {
			return {
				labelStyle: {
					marginBottom: "20rpx",
					fontSize: "28rpx",
					fontFamily: "PingFang SC",
					fontWeight: 400,
					color: "#000000",
				},
				form: {
					real_name: "",
					idcard: "",
					idcard_z: [],
					idcard_f: []
				},

			}
		},
		created() {
			this.getUserRealInfo()
		},
		methods: {
			// 删除身份证正面图片
			async deletePicZ(event) {
				const data = await ImageDel([event.file.url])
				this.form.idcard_z.splice(event.index, 1)
				console.log(data.msg)
				if (data.status == 200) {
					uni.showModal({
						content: data.msg
					})
				}
			},
			// 删除身份证反面图片
			async deletePicF(event) {
				this.form.idcard_f.splice(event.index, 1)
				const data = await ImageDel([event.file.url])
				if (data.status == 200) {
					uni.showModal({
						content: data.msg
					})
				}
			},
			// 新增身份证正面图片
			async afterReadZ(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.idcard_z.length
				lists.map((item) => {
					this.form.idcard_z.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, '--88--')
					let item = this.form.idcard_z[fileListLen]
					this.form.idcard_z.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result[0].name,
						name: result[0].oname
					}))
					fileListLen++
				}
			},
			// 新增身份证反面图片
			async afterReadF(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.idcard_f.length
				lists.map((item) => {
					this.form.idcard_f.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, '--88--')
					let item = this.form.idcard_f[fileListLen]
					this.form.idcard_f.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result[0].name,
						name: result[0].oname
					}))
					fileListLen++
				}
			},
			// 上传图片接口
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://hunlian.huidn.com/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						// header: {
						// 	'Authori-zation': 'Bearer ' + uni.getStorageSync('Token')
						// },
						header: {
							'Authori-zation': 'Bearer ' +
								'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodW5saWFuLmh1aWRuLmNvbSIsImV4cCI6MTcwNjg1MjU4NCwianRpIjp7ImlkIjoyLCJ0eXBlIjoid3hhcHAifX0.0BlMe6vIdYwzUKXktSrdn6pxUXVPh3K3g1BSBueSW3g'
						},
						success: (res) => {
							// console.log(JSON.parse(res.data).images, '--113--')
							setTimeout(() => {
								resolve(JSON.parse(res.data).images)
							}, 1000)
						}
					});
				})
			},
			changeRealName(event) {
				// console.log(event)
				this.form.real_name = event
			},
			changeIdCard(event) {
				// console.log(event)
				this.form.idcard = event
			},
			async getUserRealInfo() {
				const
					data = await UserRealInfo()
				// console.log(data, '--185--')
				if (data.status == 200) {
					this.form.real_name = data.data.real_name
					this.form.idcard = data.data.idcard
					this.form.idcard_z = [data.data.idcard_z]
					this.form.idcard_f = [data.data.idcard_f]
				}
			},
			async Save() {
				// console.log(this.form.idcard_z, '--188--')
				const data = await UserRealSave({
					...this.form,
					idcard_z: this.form.idcard_z[0],
					idcard_f: this.form.idcard_f[0]
				})
				if (data.status == 200) {
					// console.log(data)
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
					uni.navigateTo({
						url: '/pages/basic/index'
					})
				} else {
					// console.log(data)
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;

		.auth-title {
			margin-top: 228rpx;
			margin-left: 48rpx;
			width: 502rpx;
			height: 112rpx;
			font-size: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #5861C0;
		}

		.auth-form {
			margin-left: 48rpx;
			margin-right: 48rpx;
			height: 100%;
			margin-top: 52rpx;

			// margin-bottom: 80rpx;

			// margin-bottom: 104rpx;
			.btn {
				width: 370rpx;
				height: 96rpx;
				background: linear-gradient(90deg, #EC8D7E 0%, #FF6F59 100%);
				box-shadow: 0rpx 4rpx 20rpx 0rpx #F7E4E1, inset 0rpx 2rpx 20rpx 6rpx rgba(255, 174, 161, 0.61);
				border-radius: 150rpx;
				margin-top: 14rpx;
				margin-bottom: 80rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}


	}
</style>